<template>
  <ElDrawer title="个人资料" v-model="lockStore.userInfoModifyVisible" width="500">
    <ElForm ref="form" label-width="auto">
      <ElFormItem label="UID">
        <ElTag>{{ lockStore.userInfoM.userId }}</ElTag>
      </ElFormItem>
      <ElFormItem label="修改昵称">
        <ElInput v-model="lockStore.userInfoM.nickName"></ElInput>
      </ElFormItem>
      <ElFormItem label="更换头像">
        <ElAvatar style="margin-right: 20px" shape="circle" :size="42" fit="contain" :src="urlM" />
        <div>{{ urlM }}</div>

        <ElUpload
          ref="upload"
          :limit="1"
          action="http://localhost:9090/upload/pic"
          method="post"
          :headers="{ authorization: 'Bearer ' + store.token }"
          name="file"
          :on-success="onSuccess"
        >
          <template #trigger>
            <ElButton type="primary">选择图片</ElButton>
          </template>
        </ElUpload>
      </ElFormItem>
      <ElDivider></ElDivider>
      <ElFormItem>
        <ElButton style="flex: 1" icon="Plus" type="success" @click="save()">保存</ElButton>
      </ElFormItem>
    </ElForm>
  </ElDrawer>
</template>
<script lang="ts" setup>
import { useMenuStore } from '@/stores/menu'
import { useLockStore } from '@/stores/lock'
import { UserInfo } from '@/entity/user.entity'
import { findById } from '@/apis/auth'
const store = useMenuStore()
const lockStore = useLockStore()
const t = import.meta.env.VITE_STATIC_RESOURCES

const urlM = computed(() => {
  console.log('urlM')
  if (lockStore.userInfoM.pic) {
    if (!lockStore.userInfoM.pic) {
      return '/favicon.ico'
    } else {
      return t + lockStore.userInfoM.pic
    }
  } else {
    return undefined
  }
})
let urlN = ref('')
watchEffect(() => {
  if (lockStore.userInfoM.pic) {
    if (!lockStore.userInfoM.pic) {
      urlN.value = '/favicon.ico'
    } else {
      urlN.value = t + lockStore.userInfoM.pic
    }
  } else {
    urlN.value = ''
  }
})

const onSuccess = (data: any) => {
  console.log(data)
  lockStore.userInfoM.pic = data
  console.log(lockStore.userInfoM.pic)
}
const save = async () => {
  const res = await axios({
    method: 'post',
    url: '/userInfo/modify',
    data: lockStore.userInfoM
  })

  store.userInfo = res.data
  ElMessage.warning('修改成功')
  lockStore.userInfoModifyVisible = false
}
</script>
<style lang="scss" scoped></style>
